<template>
    <div class="LoadMore">
        <!--加载更多-->
        <p class="moreBtn animated flipInX" v-if="!noData" >
            <el-button 
                       type="primary" 
                       :loading="!loadMoreState" 
                       size="mini" 
                       @click="loadMoreData"
                       :disabled="!loadMoreState">{{loadMoreText}}</el-button>
        </p>
        <!--没有更多-->
        <fieldset class="noMore animated flipInX" v-if="noData" >
            <legend align="center" class="noMoreText">没有更多了</legend>
        </fieldset>
    </div>
</template>

<script>
    export default {
        name: 'LoadMore',
        props:['data'],
        data () {
            return {
                loadMoreState:true,//加载更多按钮状态
                loadMoreText:'加载更多',//加载更多文本
                currentPage:2,//当前页
                prePage:6,//每页显示几条数据
                noData:false,//是否还有数据
            }
        },
        watch:{

        },
        methods:{
            //加载更多
            loadMoreData(){
                this.loadMoreState = false;
                this.loadMoreText = '加载中..';
                let postData = this.data.postData;
                postData.page = this.currentPage;
                this.Posthttp(this.data.url,postData,(res)=>{
                    this.loadMoreState = true;
                    this.loadMoreText = '加载更多';
                    let Dlength = JSON.parse(res.bodyText).data.list.length;
                    if(Dlength<1){
                        this.noData = true; 
                    }else{
                        this.noData = false;
                        this.currentPage++;
                        this.$emit('LoadMore',JSON.parse(res.bodyText).data.list)
                    }
                });
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .LoadMore {
        /*加载更多*/
        .moreBtn{
            text-align: center;
            padding: .1rem 0 0;
        }
        /*没有更多*/
        .noMore{
            border: 0;
            border-top: 1px solid #e4e4e4;
            margin-top: .2rem;
            .noMoreText{
                padding: 0 .2rem; 
                color: #999;
            }
        }

    }
</style>
